<template>
  <div class="menu_form">
    <tiny-form
      :inline="true"
      label-position="right"
      :model="menuData"
      label-suffix="："
      label-width="120px"
      ref="ruleForms"
      validate-type="text"
      :inline-message="true"
      @validate="validate"
      :rules="menuRule"
      message-type="block"
      size="small">
      <tiny-row :gutter="12" >
        <tiny-col :span="6">
        <tiny-form-item label="应用区域" prop="spaceId">
          <vo-select default  select dictCode="sysSpaceList" v-model:value="menuData.spaceId" placeholder="请选择显示区域"  @change="spaceChange" />
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="上级菜单" prop="parentId">
          <vo-select tree :options="data.menuList" displayValue="menuId" displayName="menuName" checkStrictly placeholder="请选上级菜单" v-model:value="menuData.parentId" @change="change" />
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <!-- <tiny-row>
        <tiny-form-item label="菜单类型">
          <tiny-radio-group v-model="menuData.menuType" @change="menuTypeChange">
            <tiny-radio-button label="1">菜单</tiny-radio-button>
            <tiny-radio-button label="2">按钮</tiny-radio-button>
          </tiny-radio-group>
        </tiny-form-item>
      </tiny-row> -->

      <tiny-row :gutter="12">
        <tiny-col :span="6">
        <tiny-form-item label="菜单图标">
           <vo-select icon v-model:value="menuData.menuIcon" />
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="菜单编码" prop="menuCode">
          <tiny-input v-model="menuData.menuCode"   ></tiny-input>
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="12">
        <tiny-col :span="6">
        <tiny-form-item label="菜单名称" prop="menuName">
          <tiny-input v-model="menuData.menuName"></tiny-input>
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="菜单排序">
          <tiny-input v-model="menuData.orderNum" type="number"></tiny-input>
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="12">
        <tiny-col :span="6">
        <tiny-form-item label="路由地址" v-if="menuData.menuType == 1">
          <tiny-input v-model="menuData.routerPath"></tiny-input>
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="组件路径" v-if="menuData.menuType == 1">
          <tiny-input v-model="menuData.filePath"></tiny-input>
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="12">
        <tiny-col :span="6">
        <tiny-form-item label="路由参数" v-if="menuData.menuType == 1">
          <tiny-input v-model="menuData.menuParam"></tiny-input>
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="权限字符" v-if="menuData.menuType == 1 || menuData.menuType == 2">
          <tiny-input v-model="menuData.menuAuthority"></tiny-input>
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="12" v-if="menuData.menuType == 1">
        <tiny-col :span="6">
        <tiny-form-item label="是否缓存">
          <tiny-radio-group v-model="menuData.isCache" @change="isCache">
            <tiny-radio-button label="1">缓存</tiny-radio-button>
            <tiny-radio-button label="0">不缓存</tiny-radio-button>
          </tiny-radio-group>
        </tiny-form-item>
        </tiny-col>
        <tiny-col :span="6">
        <tiny-form-item label="显示状态">
          <tiny-radio-group v-model="menuData.menuHidden" @change="menuHidden">
            <tiny-radio-button label="0">显示</tiny-radio-button>
            <tiny-radio-button label="1">隐藏</tiny-radio-button>
          </tiny-radio-group>
        </tiny-form-item>
      </tiny-col>
      </tiny-row>
      <tiny-row :gutter="12">
        <tiny-col :span="6">
        <tiny-form-item label="使用状态">
          <tiny-radio-group v-model="menuData.isStop" @change="isStop">
            <tiny-radio-button label="0">正常</tiny-radio-button>
            <tiny-radio-button label="1">停用</tiny-radio-button>
          </tiny-radio-group>
        </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-form-item label="备注" prop="mome">
          <tiny-input v-model="menuData.mome" type="textarea" maxlength="50" :cols="60"></tiny-input>
        </tiny-form-item>
      </tiny-row>
    </tiny-form>
    <div style="text-align: center; padding-top: 30px">
      <tiny-radio-group>
        <tiny-button round type="primary" @click="save(ruleForms)"><vo-icon iconName="save"></vo-icon>确定</tiny-button>
        <tiny-button round @click="cell"><vo-icon iconName="close"></vo-icon>取消</tiny-button>
      </tiny-radio-group>
    </div>
  </div>
</template>

<script setup>
  import {reactive, ref, getCurrentInstance} from 'vue';
  let {proxy} = getCurrentInstance();
  import {cosSystem} from '@/stores/system.js';
  const store = cosSystem();
  import {Modal, Notify} from '@opentiny/vue';
  const props = defineProps({ 
    menuData: {isStop: '0', isHidden: '0', isCache: '0', menuType: '1'},
    isShow: {type: Boolean, default: false},
   
  });
  const data = reactive({
    menuList: [],
    menuData: {},
  });

  const ruleForms = ref();
  const menuRule = ref({
    menuName: [{required: true, message: '菜单名称不能为空', trigger: 'blur'}],
    spaceId: [{required: true, message: '请选择应用区域', trigger: 'blur'}],
    // parentId: [{required: true, message: '请选择父级菜单', trigger: 'blur'}],
  });
  const emits = defineEmits(['update:isShow', 'getMenu']);
  const save = ruleForms => {
    ruleForms.validate(valid => {
      if (valid) {
        proxy.$api.menu.saveMenu(props.menuData).then(res => {
          if (res.code != -1) {
            Modal.message({
              type: 'success',
              message: res.msg,
            });
            //处理菜单重置
            store.restMenu();
            emits('update:isShow', false);
          } else {
            Modal.message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      } else {
        return false;
      }
    });
  };
  const spaceChange = ()=>{
    console.log(222)
    if(props.menuData.spaceId){
    //获取下拉菜单
    proxy.$api.menu.getMenuListBySpaceId({spaceId:props.menuData.spaceId}).then(res=>{
        data.menuList = res;
        console.log(res)
      }) 
    }

  }
  const menuTypeChange = val => {
    menuData.value.menuType = val;
  };
  const cell = () => {
    emits('update:isShow', false);
  };
</script>
<style lang="scss" scoped>
  .menu_form {
    padding-left: 30px;
  }
</style>
